<template>
    <div class="menu xiaozhucaishui-menu">
        <div class="con">
            <div class="log">
                <img
                    src="~/assets/images/logo.png"
                    alt="小竹财税"
                    @click="goIndex"
                />
            </div>
            <el-menu
                :default-active="menuIndex"
                background-color="transparent"
                class="el-menu-demo"
                active-text-color="#1C87F3"
                text-color="#333333"
                mode="horizontal"
                @select="handleSelect"
            >
                <el-menu-item index="0">
                    <nuxt-link to="/"> 首页 </nuxt-link>
                </el-menu-item>
                <el-menu-item index="9" class="hot-class">
                    <nuxt-link to="/chatgpt/xzcsgpt" target="_blank"
                        >财税AI</nuxt-link
                    >
                    <img
                        src="~/assets/images/quizData/hot.png"
                        class="hot"
                        alt=""
                    />
                </el-menu-item>
                <template v-for="item in menuList">
                    <template v-if="item.list.length == 0">
                        <el-menu-item
                            :key="item.index"
                            :index="item.index"
                            class="hot-class"
                        >
                            <nuxt-link :to="item.path">
                                {{ item.name }}
                            </nuxt-link>
                            <img
                                v-show="item.hot"
                                src="~/assets/images/quizData/hot.png"
                                class="hot"
                                alt=""
                            />
                        </el-menu-item>
                    </template>
                    <template v-else>
                        <el-submenu
                            :key="item.index"
                            :index="item.index"
                            class="hot-class"
                        >
                            <template slot="title">
                                <nuxt-link
                                    class="hot-class-span"
                                    :style="{
                                        color:
                                            menuIndex == item.index
                                                ? 'rgb(28, 135, 243)'
                                                : '',
                                    }"
                                    :to="item.path"
                                    @click="menuItemClick(item)"
                                >
                                    {{ item.name }}
                                </nuxt-link>
                                <img
                                    v-show="item.hot"
                                    src="~/assets/images/quizData/hot.png"
                                    class="hot hot32"
                                    alt=""
                                />
                            </template>
                            <el-menu-item
                                v-for="itx in item.list"
                                :key="itx.index"
                                :index="itx.index"
                                v-show="!itx.noShow"
                            >
                                <nuxt-link
                                    :to="{
                                        name: itx.path,
                                        params: itx.params,
                                        query: itx.query,
                                    }"
                                    :style="{
                                        color:
                                            menuIndex == itx.index
                                                ? 'rgb(28, 135, 243)'
                                                : '',
                                    }"
                                >
                                    {{ itx.name }}
                                </nuxt-link>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </template>
            </el-menu>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

function getMunuListIndex(e) {
    if (e == null) return 0;
    let menuIndex = parseInt(e);
    if (menuIndex >= 10) {
        return Math.trunc(menuIndex / 10) - 1;
    } else {
        return menuIndex - 1;
    }
}

export default {
    name: "myMenu",
    data() {
        return {
            keyword: "",
            menuSearchIndex: "1",
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
            menuList: (state) => state.menuList,
            indexHotSearch: (state) => state.indexHotSearch,
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {
        menuIndex(n, o) {
            this.getMenuSearchIndex(n);
        },
    },
    created() {},
    mounted() {},
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        menuItemClick(item) {
            this.setmenuIndex(item.index);
            // this.$router.push({
            //     path: item.path,
            // });
        },

        handleSelect(e) {
            this.setmenuIndex(e);

            this.getMenuSearchIndex(e);

            return;
            if (e == "0") {
                this.$router.push({ path: "/" });
            } else if (e.length > 1) {
                let item = this.menuList[getMunuListIndex(this.menuIndex)].list;
                let i = parseInt(this.menuIndex[1]);
                if (item[i].path != this.$route.fullPath) {
                    this.$router.push({
                        name: item[i].path,
                        params: item[i].params,
                        query: item[i].query,
                    });
                }
            } else if (
                this.menuList[getMunuListIndex(this.menuIndex)].path &&
                this.$route.fullPath !=
                    this.menuList[getMunuListIndex(this.menuIndex)].path
            ) {
                this.$router.push({
                    path: this.menuList[getMunuListIndex(this.menuIndex)].path,
                });
            }
        },

        getMenuSearchIndex(e) {
            if (e == "0" || e == null) return;
            if (e.length > 2 && e[0] == "4") return;
            else this.menuSearchIndex = e;
        },

        goSearch() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
                return;
            }
            // if (!this.keyword && !this.indexHotSearch[this.menuIndex[0]]) {
            //     this.$message({
            //         message: "请输入搜索关键字",
            //         type: "warning",
            //     });
            //     return;
            // }
            this.keyword = this.keyword.trim();
            let keyword = "";
            if (!this.keyword) {
                keyword = this.indexHotSearch[this.menuIndex[0]];
            } else {
                keyword = this.keyword;
            }
            let path = "issue";
            if (this.menuIndex)
                switch (this.menuIndex[0]) {
                    case "1":
                        path = "issue";
                        break;
                    case "2":
                        path = "xiaozhuwenda";
                        break;
                    case "3":
                        path = "policy";
                        break;
                    case "4":
                        path = "norm";
                        break;
                    case "5":
                        path = "xueyuan";
                        break;
                    case "6":
                        path = "newdrygoods";
                        break;
                    case "7":
                        path = "information";
                        break;
                    default:
                        path = "issue";
                }
            // window.location.href = `http://zhusou.xzcs2022.com/search/${path}?q=${this.keyword}`

            keyword = keyword.replace(/%/g, "%25");
            keyword = keyword.replace(/\+/g, "%2B");
            keyword = keyword.replace(/</g, "%253C");
            keyword = keyword.replace(/>/g, "%253E");
            console.log(keyword);
            let url = `https://api.xiaozhucaishui.com/search/${path}?q=${keyword}`;
            if (this.userInfo) url += `&deviceid=${this.userInfo.id}`;
            window.open(url);
            // this.$router.push({
            //     path: "/SearchIndex",
            //     query: { keyword: this.keyword },
            // });
        },

        goIndex() {
            this.$router.push({
                path: "/",
            });
        },
    },
};
</script>

<style lang="scss">
.xiaozhucaishui-menu {
    $background: hsla(0, 0%, 100%, 0.9);
    color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: saturate(140%) blur(20px);
    background: $background;
    // background-color: rgba($color: #ffffff, $alpha: 0.9);
    height: 80px;
    border-bottom: 1px solid #f3f3f3;
    .search {
        cursor: pointer;
        display: flex;
        align-items: center;
        // background-color: #f5f5f5;
        // width: 160px;
        // height: 40px;
        // border-radius: 31px;
        justify-content: space-between;
        // box-sizing: border-box;
        // padding: 0 15px;
        width: 192px;
        height: 40px;
        background: #f5f5f5;
        border-radius: 31px;
        box-sizing: border-box;
        padding: 0px 23px;
        span {
            position: relative;
            top: -1px;
            color: #1c87f3;
            font-size: 15px;
            padding-left: 4px;
        }

        // .input {
        //     display: flex;
        //     justify-content: space-between;
        //     align-items: center;
        //     width: 190px;
        // }
        i {
            color: #1c87f3;
            font-size: 20px;
        }
    }

    .con {
        height: 80px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .log {
        cursor: pointer;
        width: 115px;
        height: 36px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .hot-class {
        position: relative;
        .hot {
            position: absolute;
            top: 12px;
            right: 8px;
            width: 14px;
            height: 16px;
        }
        .hot32 {
            right: 32px !important;
        }
    }

    .el-menu.el-menu--horizontal {
        border-bottom-width: 0;
    }

    .el-menu--horizontal > .el-menu-item {
        border-bottom-width: 0 !important;
        font-size: 16px;
        height: 70px;
        line-height: 70px;
        padding: 0 23px;

        &:hover {
            // opacity: 0.7;
            background-color: transparent !important;
        }
    }

    .el-submenu__title {
        border-bottom-width: 0 !important;
        font-size: 16px;
        height: 70px;
        line-height: 70px;
        padding: 0 23px;

        &:hover {
            opacity: 0.7;
            background-color: transparent !important;
        }
    }

    .el-submenu__title {
        border-bottom-width: 0 !important;
        font-size: 16px;
        height: 70px !important;
        line-height: 70px !important;

        &:hover {
            opacity: 0.7;
            background-color: transparent !important;
        }
    }

    .el-input__inner {
        background-color: transparent;
        border-width: 0;
        padding: 0 6px;
        color: #9e9e9e;
    }
    .hot-class-span {
        position: relative;
        top: 0;
    }
    .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
        margin-top: 3px;
    }
    .el-menu--popup {
        min-width: 100px !important;
        text-align: center;
        background-color: hsla(0, 0%, 100%, 0.95) !important;

        .el-menu-item {
            &:hover {
                // opacity: 0.7;
                background-color: transparent !important; 
            }
        }
    }
}
</style>
